<script setup>
import { Head } from '@inertiajs/vue3'
import { computed } from 'vue'
import SpotlightLayout from '@/Layouts/SpotlightLayout.vue'
import SimpleLayout from '@/Components/Spotlight/SimpleLayout.vue'
import ArticleCard from '@/Components/Spotlight/ArticleCard.vue'
import Pagination from '@/Components/UI/Pagination.vue'

const props = defineProps({
  category: {
    type: Object,
    required: true,
  },
  posts: {
    type: Object,
    required: true,
  },
})

const articles = computed(() =>
  props.posts.data.map((post) => ({
    id: post.id,
    slug: post.slug,
    title: post.title,
    description: post.excerpt,
    date: post.published_at,
    href: route('blog.posts.show', post.slug, false),
    cta: '阅读全文',
  })),
)
</script>

<template>
  <SpotlightLayout :title="category.name">
    <Head :title="category.name" />

    <SimpleLayout :title="category.name" :intro="category.description">
      <div class="space-y-16">
        <template v-if="articles.length">
          <ArticleCard
            v-for="article in articles"
            :key="article.id"
            :article="article"
          />
        </template>
        <p v-else class="text-sm text-zinc-500 dark:text-zinc-400">
          这个分类暂时还没有文章。
        </p>
      </div>

      <div v-if="posts.links?.length > 1" class="mt-16 flex justify-center">
        <Pagination :links="posts.links" />
      </div>
    </SimpleLayout>
  </SpotlightLayout>
</template>
